<template>
  <div id="box">
    <div class="heade">
      <h1>
        <i></i>概览
      </h1>
    </div>
    <div class="bottombox">

    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
    };
  },
  created() {
  },
  mounted() {
    this.initChart();
    let that = this;
    window.addEventListener("resize", that.resizeHandler);
  },
  beforeDestroy() {
    // 销毁监听事件
    let that = this;
    window.removeEventListener("resize", that.resizeHandler);
    // 销毁 Echarts 实例
    this.chart.dispose();
  },
  methods: {
    changetab(index) {
      this.tabindex = index;
    },
    getHomeOverviewData() {
      var that = this;
      var params = {
      };
      params = window.JSON.stringify(params);
      getHomeOverview(params).then((res) => {
        if (res.code == 1) {
            var data = res.body.items;
            data = {
              product:[
                {
                  name:"3盒冰川泥面膜+希腊海绵",
                  orders:1
                },
                {
                  name:"2盒冰川泥面膜+希腊海绵",
                  orders:2
                },
                {
                  name:"1盒冰川泥面膜+希腊海绵",
                  orders:4
                }                
              ],
              chart:[
                {
                  dateId:202107,
                  orders:250
                },
                {
                  dateId:202108,
                  orders:562
                },
                {
                  dateId:202109,
                  orders:356
                },
                {
                  dateId:202110,
                  orders:854
                }                
              ],
              overview:{
                today:{
                  amount:14413,
                  num:4215
                },
                week:{
                  amount:98541,
                  num:3584
                },
                all:{
                  amount:57866,
                  num:524
                }
              }
            }
            that.homedata = data;
            var time = [];
            var nowArr = [];
            data.chart.forEach(element => {
              time.push(element.dateId);
              nowArr.push(element.orders);
            });

            this.option.xAxis.data = time;
            this.option.series[0].data = nowArr;
        }
      });
    },
    mergeArray(arr1, arr2) {
      var _arr = [];
      for (var i = 0; i < arr1.length; i++) {
        _arr.push(arr1[i]);
      }
      var _dup;
      for (var i = 0; i < arr2.length; i++) {
        _dup = false;
        for (var _i = 0; _i < arr1.length; _i++) {
          if (arr2[i] === arr1[_i]) {
            _dup = true;
            break;
          }
        }
        if (!_dup) {
          _arr.push(arr2[i]);
        }
      }
      return _arr;
    },
    initChart() {
      this.chart = Chart.init(this.$refs.myEchart);
      // 把配置和数据放这里
      this.chart.setOption(this.option);
    },
    resizeHandler() {
      this.chart.resize();
    },
    formatDates(timeStamp) {
      let time = new Date(timeStamp),
        y = time.getFullYear(),
        m = time.getMonth() + 1,
        d = time.getDate();
      m = m < 10 ? "0" + m : m;
      d = d < 10 ? "0" + d : d;
      return y + "-" + m + "-" + d;
    },
    formatDatess(timeStamp) {
      let time = new Date(timeStamp),
        y = time.getFullYear(),
        m = time.getMonth() + 1,
        d = time.getDate();
      m = m < 10 ? "0" + m : m;
      d = d < 10 ? "0" + d : d;
      return y + "" + m + "" + d;
    },
    getFormatDate(fmt, date) {
      let ret;
      date = new Date(date);
      const opt = {
        "Y+": date.getFullYear().toString(), // 年
        "m+": (date.getMonth() + 1).toString(), // 月
        "d+": date.getDate().toString(), // 日
        "H+": date.getHours().toString(), // 时
        "M+": date.getMinutes().toString(), // 分
        "S+": date.getSeconds().toString(), // 秒
        // 有其他格式化字符需求可以继续添加，必须转化成字符串
      };
      for (let k in opt) {
        ret = new RegExp("(" + k + ")").exec(fmt);
        if (ret) {
          fmt = fmt.replace(
            ret[1],
            ret[1].length == 1 ? opt[k] : opt[k].padStart(ret[1].length, "0")
          );
        }
      }
      return fmt;
    },
    quickSort(arr) {
      function swap(arr, i, k) {
        let temp = arr[i];
        arr[i] = arr[k];
        arr[k] = temp;
      }
      function partition(arr, left, right) {
        let storeIndex = left;
        let pivot = arr[right]; // 直接选最右边的元素为基准元素
        for (let i = left; i < right; i++) {
          if (arr[i] < pivot) {
            swap(arr, storeIndex, i);
            storeIndex++; // 交换位置后，storeIndex 自增 1，代表下一个可能要交换的位置
          }
        }
        swap(arr, storeIndex, right); // 将基准元素放置到最后的正确位置上
        return storeIndex;
      }
      function sort(arr, left, right) {
        if (left > right) {
          return;
        }
        let storeIndex = partition(arr, left, right);
        sort(arr, left, storeIndex - 1);
        sort(arr, storeIndex + 1, right);
      }
      sort(arr, 0, arr.length - 1);
      return arr;
    },
  },
  watch: {
    raidoShow: function (val) {
      if (val) {
        this.getHomeRadioReportData();
      } else {
        this.option.series[1].data = [];
        this.getHomeReportData();
      }
    },
    "report.time": function () {
      var time = this.report.time;
      var now = this.report.now;
      var rai = this.report.rai;
      var newtime = [],
        nowArr = [],
        raiArr = [];
      if (time.length > 0) {
        time = this.quickSort(time);
        for (var i = 0, len = time.length; i < len; i++) {
          var item = {};
          item.date = time[i];
          item.data = 0;
          item.rado = 0;
          newtime.push(item);
        }
        for (var t = 0, tlen = newtime.length; t < tlen; t++) {
          if (now.length > 0) {
            for (var n = 0, nlen = now.length; n < nlen; n++) {
              if (now[n].date == newtime[t].date) {
                newtime[t].data = now[n].data;
              }
            }
          }
          if (rai.length > 0) {
            for (var r = 0, rlen = rai.length; r < rlen; r++) {
              if (newtime[t].date == rai[r].date) {
                newtime[t].rado = rai[r].data;
              }
            }
          }
        }
        for (var j = 0, jlen = newtime.length; j < jlen; j++) {
          nowArr.push(newtime[j].data);
          raiArr.push(newtime[j].rado);
        }
      }
      console.log(raiArr);
      this.option.xAxis.data = time;
      this.option.series[0].data = nowArr;
      if (this.raidoShow) {
        this.option.series[1].data = raiArr;
      }
    },
    option: {
      handler(newVal, oldVal) {
        if (this.chart) {
          if (newVal) {
            this.chart.setOption(newVal);
          } else {
            this.chart.setOption(oldVal);
          }
        }
      },
      deep: true,
    },
  },
};
</script>

<style scoped>
.item_nav {
  display: inline-block;
  border: 1px solid #d7d7d7;
  cursor: pointer;
  font-size: 12px;
  height: 20px;
  line-height: 20px;
  padding: 4px 20px;
}
.item_nav_active {
  background: #455fe7;
  color: #fff;
}
#box {
  padding: 0 15px;
  display: flex;
  flex-direction: column;
}
#box .heade {
  background: #fff;
  padding: 0 20px 1px;
  margin: 15px 0;
}
#box .bottombox {
  flex: 1;
  /* overflow-x:hidden; */
  overflow-y: auto;
  background: #fff;
  margin-bottom: 15px;
}
#box .box_head_data {
  height: 170px;
  display: flex;
  margin-bottom: 30px;
}
#box .box_head_data li {
  flex: 1;
  width: 300px;
  margin-right: 23px;
  border-radius: 8px;
  cursor: pointer;
  padding: 20px;
}
#box .box_head_data li:nth-child(1) {
  color: #a89afc;
  background: #F7F6FD;
  background-size: 100% 100%;
}
#box .box_head_data li:nth-child(2) {
  color: #fbbe87;
  background: #FDF5F2;
  background-size: 100% 100%;
}
#box .box_head_data li:nth-child(3) {
  color: #7ec2ed;
  background: #F2F7FD;
  background-size: 100% 100%;
}
#box .box_head_data li:nth-child(4) {
  color: #fd9f9e;
  background: url("../../assets/a4.png") no-repeat;
  background-size: 100% 100%;
}
#box .box_head_data li:nth-child(5) {
  color: #96a7fa;
  background: url("../../assets/a5.png") no-repeat;
  background-size: 100% 100%;
}
#box .box_head_data li:nth-child(1) .title {
  border-bottom: 1px solid #a89afc;
}
#box .box_head_data li:nth-child(2) .title {
  border-bottom: 1px solid #fbbe87;
}
#box .box_head_data li:nth-child(3) .title{
  border-bottom: 1px solid #7ec2ed;
}
#box .box_head_data li:last-child {
  margin-right: 0;
}
#box .box_head_data li .num {
  font-size: 28px;
  font-weight: 500;
  margin-top: 15px;
  padding-left: 20px;
}
#box .box_head_data li .desc {
  font-size: 24px;
  font-weight: 400;
  margin-top: 20px;
  padding-left: 20px;

}
#box .box_head_data li .title {
  font-size: 17px;
  padding-bottom: 10px;
  padding-left: 20px;
}
#box .dataBox {
  min-height: 300px;
  background: #fff;
  padding: 0 20px 0px;
  box-sizing: border-box;
  margin-bottom: 15px;
}
#box .filter {
  height: 32px;
  line-height: 32px;
  font-size: 15px;
  margin-bottom: 70px;
}
#box .filter .title {
  margin-right: 10px;
}
#box .filter .dateBox {
  float: right;
  height: 32px;
  line-height: 32px;
  font-size: 15px;
}
#box .filter .date-timer {
  width: 270px;
}
#box .filter .lookData {
  display: inline-block;
  height: 32px;
  width: 130px;
  background: #455fe7;
  margin-left: 40px;
  color: #fff;
  line-height: 32px;
  font-size: 13px;
  border-radius: 4px;
  cursor: pointer;
  box-sizing: border-box;
  padding-left: 10px;
  vertical-align: middle;
}
#box .box-sai {
  width: 240px;
}
#box .radios {
  margin-left: 20px;
  margin-right: 10px;
}
.echarts {
  min-height: 400px;
  width: 100%;
}
#box .filter .lookData .el-databtn {
  display: inline-block;
  width: 16px;
  height: 16px;
  background-color: #fff;
  -webkit-mask: url("../../assets/dataBtn.svg") no-repeat;
  mask: url("../../assets/dataBtn.svg") no-repeat;
  mask-size: 100% 100%;
  vertical-align: middle;
  margin-right: 5px;
}
#box .box_head_data1 {
  /* height: 170px; */
  /* display: flex; */
  margin-bottom: 30px;
}
#box .box_head_data1 li {
  /* flex: 1; */
  /* width: 300px; */
  margin-right: 23px;
  border-radius: 8px;
  cursor: pointer;
  padding: 12px 0 0 0px;
  color: #a89afc;
  background: #F7F6FD;
}
</style>